@media only screen and (max-width: 767px)
  .navbar-default .navbar-collapse
    border: none
    background: white
    box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.2)
    box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.239216) 0px 1px 4px
    border-radius: 2px
    width: 170px
    float: right
    margin: 0px

  #huxblog_navbar
    opacity: 0
    transform: scaleX(0)
    transform-origin: top right
    transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1)
    -webkit-transform: scaleX(0)
    -webkit-transform-origin: top right
    -webkit-transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1)

  #huxblog_navbar a
    font-size: 13px
    line-height: 28px

  #huxblog_navbar .navbar-collapse
    height: 0px
    transform: scaleY(0)
    transform-origin: top right
    transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1)
    -webkit-transform: scaleY(0)
    -webkit-transform-origin: top right
    -webkit-transition: -webkit-transform 500ms cubic-bezier(0.23, 1, 0.32, 1)

  #huxblog_navbar li
    opacity: 0
    transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 205ms
    -webkit-transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 205ms

  #huxblog_navbar.in
    transform: scaleX(1)
    -webkit-transform: scaleX(1)
    opacity: 1

  #huxblog_navbar.in .navbar-collapse
    transform: scaleY(1)
    -webkit-transform: scaleY(1)

  #huxblog_navbar.in li
    opacity: 1

.navbar-custom
  background: none
  border: none
  position: absolute
  top: 0
  left: 0
  width: 100%
  z-index: 3 /* Hux learn from
     *     TypeIsBeautiful,
     *     [This Post](http://zhuanlan.zhihu.com/ibuick/20186806) etc.
     */
  font-family: -apple-system, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif
  line-height: 1.7

.navbar-custom .navbar-brand
  font-weight: 800
  color: white
  height: 56px
  line-height: 25px

.navbar-custom .navbar-brand:hover
  color: rgba(255, 255, 255, 0.8)

.navbar-custom .nav li a
  text-transform: uppercase
  font-size: 12px
  line-height: 20px
  font-weight: 800
  letter-spacing: 1px

.navbar-custom .nav li a:active
  background: rgba(0, 0, 0, 0.12)

@media only screen and (min-width: 768px)
  .navbar-custom
    background: transparent
    border-bottom: 1px solid transparent

  .navbar-custom body
    font-size: 20px

  .navbar-custom .navbar-brand
    color: white
    padding: 20px
    line-height: 20px

  .navbar-custom .navbar-brand:hover,
  .navbar-custom .navbar-brand:focus
    color: rgba(255, 255, 255, 0.8)

  .navbar-custom .nav li a
    color: white
    padding: 20px

  .navbar-custom .nav li a:hover,
  .navbar-custom .nav li a:focus
    color: rgba(255, 255, 255, 0.8)

  .navbar-custom .nav li a:active
    background: none

@media only screen and (min-width: 1170px)
  .navbar-custom
    -webkit-transition: background-color 0.3s
    -moz-transition: background-color 0.3s
    transition: background-color 0.3s
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translate3d(0, 0, 0)
    -moz-transform: translate3d(0, 0, 0)
    -ms-transform: translate3d(0, 0, 0)
    -o-transform: translate3d(0, 0, 0)
    transform: translate3d(0, 0, 0)
    -webkit-backface-visibility: hidden
    backface-visibility: hidden

  .navbar-custom.is-fixed
    /* when the user scrolls down, we hide the header right above the viewport */
    position: fixed
    top: -61px
    background-color: rgba(255, 255, 255, 0.9)
    border-bottom: 1px solid #f2f2f2
    -webkit-transition: -webkit-transform 0.3s
    -moz-transition: -moz-transform 0.3s
    transition: transform 0.3s

  .navbar-custom.is-fixed .navbar-brand
    color: #404040

  .navbar-custom.is-fixed .navbar-brand:hover,
  .navbar-custom.is-fixed .navbar-brand:focus
    color: #0085a1

  .navbar-custom.is-fixed .nav li a
    color: #404040

  .navbar-custom.is-fixed .nav li a:hover,
  .navbar-custom.is-fixed .nav li a:focus
    color: #0085a1

  .navbar-custom.is-visible
    /* if the user changes the scrolling direction, we show the header */
    -webkit-transform: translate3d(0, 100%, 0)
    -moz-transform: translate3d(0, 100%, 0)
    -ms-transform: translate3d(0, 100%, 0)
    -o-transform: translate3d(0, 100%, 0)
    transform: translate3d(0, 100%, 0)

/* Hux Optimize UserExperience */
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover
  background-color: inherit

.navbar-default .navbar-toggle:active
  background-color: rgba(255, 255, 255, 0.25)

/* Hux customize Style for navBar button */
.navbar-default .navbar-toggle
  border-color: transparent
  padding: 19px 16px
  margin-top: 2px
  margin-right: 2px
  margin-bottom: 2px
  border-radius: 50%

.navbar-default .navbar-toggle .icon-bar
  width: 18px
  border-radius: 0px
  background-color: white

.navbar-default .navbar-toggle .icon-bar + .icon-bar
  margin-top: 3px
